<template>
  <!-- 用户文章列表模块 -->
  <div class="passage">
    <!-- 文章列表 -->
    <div class="nav">
      <span :class="{ 'active': homeArticleStore().tag === 'all' }"
        @click="homeArticleStore().setTag('all')">全部文章</span>
      <span v-show="homeArticleStore().tag != 'all'" :class="{ 'active': homeArticleStore().tag !== 'all' }">{{
        homeArticleStore().tag }}</span>
    </div>
    <ul>
      <li v-for="(item, index) in articleList" :key="item.id">
        <transition enter-active-class="animate__animated animate_fadeIn">
          <div>
            <div class="section" @click="$router.push(`/viewpassage/${item.id}`)">
              <!-- 标题 -->
              <h4>{{ item.title }}</h4>
              <!-- 内容 -->
              <div class="content" v-html="item.content" v-show="item.content"></div>
            </div>
            <!-- 控制 -->
            <div class="control">
              <span style="cursor:default;">创建时间:
                {{ item.publishTime ? formatDate(item.publishTime) : formatDate(item.publish_time) }}
              </span>
              <div class="edit" v-show="!$route.path.startsWith('/otherHome')">
                <span @click="$router.push(`/editpassage/${item.id}`)">编辑</span>
                <i>|</i>
                <span class="delete" @click="dialogShow = true; deleteId = item.id">删除</span>
              </div>
            </div>
          </div>
        </transition>
      </li>
      <li v-if="articleList.length === 0">- 暂无文章 -</li>
    </ul>

    <ModelDialog v-show="dialogShow">
      <template #body>
        <div>确定要删除吗?</div>
      </template>
      <template #footer>
        <div class="btn">
          <div class="cancel" @click="dialogShow = false">取消</div>
          <div class="confirm" @click="deleteArticle()">确定</div>
        </div>
      </template>
    </ModelDialog>
    <PopAlert v-show="popShow">
      <template #body>
        <div>删除成功</div>
      </template>
    </PopAlert>
    <!-- 分页器 -->
    <PageControl :page="page" :sum="sum" :pageSize="pageSize" @pageChangeHandler="pageChange"
      v-if="articleList.length > 0" />
  </div>
</template>

<script setup>
import { reqDelPassage, reqGetUserArticleList, reqSearchByTag } from '@/apis/passage';
import ModelDialog from '@/components/ModelDialog.vue';
import PageControl from '@/components/PageControl.vue'
import PopAlert from '@/components/popAlert.vue';
import homeArticleStore from '@/stores/modules/homeArticle';
import userStore from '@/stores/modules/user';
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

let page = ref(1)
let sum = ref(0) //总共多少个文章
let pageSize = ref(0) //每页多少个文章
let dialogShow = ref(false)
let popShow = ref(false)
let deleteId = ref('')

let userId = ref(userStore().userId)

let articleList = ref([])
onMounted(() => {
  if (route.path.startsWith('/otherHome')) {
    getArticleList({ userId: route.params.id, page: page.value })
  } else {
    getArticleList({ userId: userId.value, page: page.value })
  }
})
watch(route, () => {
  if (route.path.startsWith('/otherHome')) {
    getArticleList({ userId: route.params.id, page: page.value })
  } else {
    getArticleList({ userId: userId.value, page: page.value })
  }
})

// 获取文章列表
const getArticleList = async (params) => {
  let res = await reqGetUserArticleList(params)
  if (res.code === 200) {
    homeArticleStore().setArticleList(res.data.personArticleVoList)
    articleList.value = homeArticleStore().articleList
    sum.value = res.data.rows
    pageSize.value = res.data.personArticleVoList.length
  }
}

// 分页器
const pageChange = (pager) => {
  page.value = pager
  if (route.path.startsWith('/otherHome')) {
    getArticleList({ userId: route.params.id, page: page.value })
  } else {
    getArticleList({ userId: userId.value, page: page.value })
  }
  window.scrollTo(0, 0)
}

//  删除文章
const deleteArticle = async () => {
  let res = await reqDelPassage(deleteId.value)
  if (res.code === 200) {
    dialogShow.value = false
    popShow.value = true
    setTimeout(() => {
      popShow.value = false
    }, 2000)
    if (route.path.startsWith('/otherHome')) {
      getArticleList({ userId: route.params.id, page: page.value })
    } else {
      getArticleList({ userId: userId.value, page: page.value })
    }
  }
}

// 获取某一标签下的所有文章
const getTagArticleList = async (params) => {
  let res = await reqSearchByTag(params)
  if (res.code === 200) {
    homeArticleStore().setArticleList(res.data)
    articleList.value = homeArticleStore().articleList
    sum.value = res.data.rows
    pageSize.value = res.data.length
  }
}

watch(() => homeArticleStore().tag, (value) => {


  if (route.path.startsWith('/otherHome')) {
    if (value == 'all') {
      getArticleList({ userId: route.params.id, page: page.value })
    } else {
      getTagArticleList({ userId: route.params.id, tag: value, page: page.value })
    }
  } else {
    if (value == 'all') {
      getArticleList({ userId: userId.value, page: page.value })
    } else {
      getTagArticleList({ userId: userId.value, tag: value, page: page.value })
    }
  }
})

// 格式化时间
const formatDate = (date) => {
  return (date.slice(0, 10).split('-').join('/') + ' ' + date.slice(11, 16))
}

</script>

<style lang="scss" scoped>
.passage {
  background-color: #B0A272;
  box-shadow: .0333rem .0333rem .0667rem #000000;
  margin-bottom: .3333rem;
  padding: .3333rem .3333rem .3333rem;
  width: 100%;

  .nav {
    width: 50%;
    // margin: .1667rem;
    display: flex;
    justify-content: space-around;
    font-size: .3333rem;
    padding-bottom: .16rem;
    border-bottom: .05rem solid #fff;

    span {
      cursor: pointer;
    }

    .active {
      font-weight: bold;
    }
  }

  ul {
    margin-top: .2667rem;

    li {
      background-color: #fff;
      height: 2.5rem;
      width: 11.8333rem;
      margin: auto;
      margin-top: -0.4167rem;
      padding: .3333rem;
      box-shadow: -0.0333rem -0.0333rem .0833rem .0167rem #666;
      transition: all .3s ease-in-out;

      .section {
        cursor: pointer;

        // 标题
        h4 {
          width: 90%;
          font-size: .4rem;
          color: #666;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        // 内容
        .content {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-top: .1667rem;
          text-indent: 2em;
          font-size: .3rem;
        }

        &:hover {
          text-decoration: underline #985 solid .0167rem;
        }
      }

      // 控制
      .control {
        display: flex;
        justify-content: space-between;
        margin-top: .2rem;

        span {
          cursor: pointer;
          display: block;
        }

        .edit {
          display: flex;

          i {
            padding: 0 .1667rem;
            font-weight: bold;

          }

          span:hover {
            border-bottom: #666 solid .0333rem;
          }
        }
      }

      &:nth-child(1) {
        margin-top: 0;
      }

      &:hover {
        transform: translateY(-15%);
        box-shadow: -0.0333rem 0.0333rem .0833rem .0167rem #666;
      }
    }
  }
}

div {
  font-size: .2667rem;
}

.btn {
  display: flex;
  justify-content: space-around;
  width: 100%;

  div {
    cursor: pointer;
    padding: .0833rem;

    &:hover {
      color: #fff;
      background-color: #985;
    }

  }

}
</style>